<template>
    <div class="dialog-layer" v-if="visible">
        <div class="layer-header">
            <div class="layer-header__title">
                <slot name="title">{{ title }}</slot>
            </div>
            <div class="layer-header__button">
                <slot name="button"></slot>
                <el-button @click="close" size="medium" icon="iconfont icon-fanhui">返回</el-button>
            </div>
        </div>
        <div class="layer-content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DialogLayer', // layer遮罩层
    props: {
        visible: { // 是否显示
            type: Boolean,
            default: false
        },
        title: { // 标题 也可通过slot插槽写入
            type: String
        },
        appendToFrame: { // 是否插入到框架DOM中 (慎选，如选这个 则需要切换路由前 先关闭浮层)
            type: Boolean,
            default: false
        },
        appendToWhere: { // 将DOM插入到哪里 如填写则必须填写元素的唯一ID
            type: String,
            default: ''
        },
    },
    components: {},
    data() {
        return {}
    },
    watch: {
        visible(val) {
            if(this.appendToFrame) {
                if (val) {
                    setTimeout(() => {
                        let frameEle = document.getElementById('main-page');
                        if(frameEle) {
                            frameEle.appendChild(this.$el);
                        }
                    }, 50)
                } else {
                    setTimeout(() => {
                        if (this.$el && this.$el.parentNode) {
                            this.$el.parentNode.removeChild(this.$el);
                        }
                    }, 50)
                }
            }else if(this.appendToWhere) {
                if (val) {
                    setTimeout(() => {
                        let container = document.getElementById(this.appendToWhere);
                        if(container) {
                            container.style.position = 'relative';
                            container.appendChild(this.$el);
                        }
                    }, 50)
                } else {
                    setTimeout(() => {
                        if (this.$el && this.$el.parentNode) {
                            this.$el.parentNode.removeChild(this.$el);
                        }
                    }, 50)
                }
            }
        },
    },
    methods: {
        close() {
            this.$emit('update:visible', false);
            this.$emit('close');
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f3f9fe;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    .layer-header {
        height: 60px;
        line-height: 60px;
        padding: 0 10px;
        overflow: hidden;
        border-bottom: 1px #e4e7ed solid;
        .layer-header__title {
            float: left;
            font-size: 16px;
            font-weight: 600;
            .back {
                padding: 9px 12px;
                background: #f2f6fc;
                border-radius: 5px;
                cursor: pointer;
                &:hover {
                    background: #e6f1f9;
                }
                i {
                    margin-right: 5px;
                    vertical-align: middle;
                }
            }
        }
        .layer-header__button {
            float: right;
        }
    }
    .layer-content {
        flex: 1;
        overflow: hidden;
        padding: 20px 0;
        padding-bottom: 0;
    }
}
</style>